<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 移动端视口 移动端必加 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <!--  -->
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
    </script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购</title>
    <link rel="stylesheet" href="css/reset2.css">
    <link rel="stylesheet" href="css/pro.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-pagination-fraction {
            bottom: 10px;
            right: 20px;
            width: auto;
            font-size: .52rem;
            padding: 2px 10px;
            border-radius: 20px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
            left: auto;
        }
    </style>
</head>

<body>

    <div class="container">
        <header>
            <!-- 头部介绍 -->

            <div class="Head_introduction">
                <ul>
                    <li class="i1">
                        <i class="icon2 con1">&#xe622;</i>
                    </li>
                    <li>
                        合味道XO酱海鲜风味面
                    </li>
                    <li class="i2">
                        <i class="icon2 con2">&#xe63e;</i>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
        </header>
        <section>
            <!--商品位-->
            <div class=" Commodity_position">
                <!-- <img src="images-pro/goods.jpg" alt=""> -->
                <!-- Swiper -->
                <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="images-pro/goods.jpg" alt="" class="img-responsive"></div>
                            <div class="swiper-slide"><img src="images-pro/goods.jpg" alt="" class="img-responsive"></div>
                            <div class="swiper-slide"><img src="images-pro/goods.jpg" alt="" class="img-responsive"></div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                        <!-- Add Arrows -->
                        <!-- <div class="swiper-button-next"></div> -->
                        <!-- <div class="swiper-button-prev"></div> -->
                </div>
                <div class="introduce">
                    <h3>合味道XO酱海鲜风味面</h3>
                    <p>
                        <i> ￥</i>5
                        <span>￥6</span>
                    </p>
                </div>
                <div class="product">
                    <p>
                        <span>品牌</span>日清</p>
                    <p class="p2">
                        <span>产品规格</span>87g</p>
                </div>
            </div>
        </section>
        <section>
            <!--photo-->
            <div class="photo">
                <img src="images-pro/bg1.png" alt="">
            </div>
        </section>
        <div class="nav">
            <ul>
                <li class="nav_fonts">添加商品：</li>
                <li class="add d1"><i class="icon2" onclick="qwe()">&#xe66a;</i></li>
                <li id="asd">0</li>
                <li class="add"><i class="icon2"  onclick="zxc()">&#xe61c;</i></li>
                <div class="clear"></div>
            </ul>
            <div class="line"></div>
            <div class="juxing"></div>
            <div class="yellow_y">
                <i class="icon2">&#xe60f;</i>
               <p>￥0元起送</p>
            </div>
        </div>

    </div>


    <script src="js/jquery.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
        function zxc(){
            var asd = document.getElementById('asd').innerHTML
            var jia = parseInt(asd) + 1
            document.getElementById('asd').innerHTML = jia
        }
        function qwe(){
            var asd = document.getElementById('asd').innerHTML
            if(asd !=0){
                var jia = parseInt(asd) - 1
                document.getElementById('asd').innerHTML = jia ;
            }
        }

        // 广告图
        var swiper = new Swiper('.swiper-container', {
            loop:true,
            autoplay: {
            delay: 1500,
            // stopOnLastSlide: false, 
            disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                // type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            });
    </script>
</body>

</html>